import { useState, forwardRef, useImperativeHandle } from 'react'
import { Col, Layout, Input } from 'antd'
import sendIcon from '@/assets/send_icon.png'
import './index.less'

const { TextArea } = Input
const SendArea = forwardRef(({ sendHandle }, ref) => {
  const [keyword, setKeyword] = useState('')

  //暴露给父组件的方法以及数据
  useImperativeHandle(ref, () => ({
    resetContent,
  }))

  const resetContent = () => {
    setKeyword('')
  }

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault() // 阻止默认的 Enter 换行行为
      sendHandle(keyword)
    }
  }
  return (
    <Col span={24} className="chat-input">
      <TextArea
        value={keyword}
        className="editor"
        autoSize={true}
        placeholder="Enter发送; Shift+Enter换行"
        variant="borderless"
        onPressEnter={handleKeyDown}
        // onKeyDown={handleKeyDown}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <img className="send-icon btn" src={sendIcon} onClick={()=>sendHandle(keyword)}></img>
    </Col>
  )
})
export default SendArea
